<template>
  <div class="container">
    <div class="chart">
      <LakerEcharts :option="option" width="100%" height="100%" />
    </div>
    <div class="chart">
      <LakerEcharts :option="option2" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import LakerEcharts from '@comp/lakerEcharts/index.vue'
import dprevent from '@/api/dprevent'
export default {
  name: 'DpLeftItem3',
  components: {
    LakerEcharts
  },
  data() {
    return {
      option: {
        title: {
          text: '职业健康',
          x: '30%',
          y: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '重大风险' },
              { value: 735, name: '较大风险' },
              { value: 580, name: '一般风险' },
              { value: 484, name: '低风险' }
            ]
          }
        ]
      },
      option2: {
        title: {
          text: '环境',
          x: '40%',
          y: 'center',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '重大风险' },
              { value: 735, name: '较大风险' },
              { value: 580, name: '一般风险' },
              { value: 484, name: '低风险' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
    setInterval(() => {
      this.getApiData()
    }, 5000)
  },
  methods: {
    getApiData() {
      dprevent.dpleftapi3().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            let data = res.result
            this.option.series[0].data = data.hvalue
            this.option2.series[0].data = data.evalue
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .chart {
    width: 50%;
    height: 100%;
  }
}
</style>
